<template>
  <div class="bread-handle-box">
    <el-row :gutter="4">
      <el-col :span="6">
        <UserAdminInfo v-if="userType === 1"
                       :value="adminValue"
                       :open="openAccount" />
        <UserGeneralInfo v-else
                         :value="general" />
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <!-- <Tabs :tool-tab-data="toolTabData"
                @input="handleInput" /> -->
          <el-tabs type="border-card">
            <el-tab-pane v-if="userType === 1"
                         label="基础信息">
              <UserBasicInfo :value="adminValue"
                             @refresh="handleRefresh" />
            </el-tab-pane>
            <el-tab-pane v-if="userType === 1"
                         label="账号绑定">
              <UserAccountBind :value="account"
                               @update="handleUpdate" />
            </el-tab-pane>
            <el-tab-pane label="账号安全">
              <UserAccountSecure :value="account" />
            </el-tab-pane>
          </el-tabs>
          <!-- <component :is="currentView"
                     :value="adminValue"></component> -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { account } from "@service"
import { user } from "@/api/index";
const UserGeneralInfo = () => import("./UserGeneralInfo.vue");
const UserAdminInfo = () => import("./UserAdminInfo.vue");
const UserBasicInfo = () => import("./UserBasicInfo.vue");
const UserAccountBind = () => import("./UserAccountBind.vue");
const UserAccountSecure = () => import("./UserAccountSecure.vue");

export default {
  name: "TabComponent",
  components: { UserAdminInfo, UserGeneralInfo, UserBasicInfo, UserAccountBind, UserAccountSecure },
  data () {
    return {
      userInfo: sessionStorage.getItem('userInfo'),
      info: {},
      account: {},
      general: {},
      adminValue: {}
    };
  },
  computed: {
    user () {
      return JSON.parse(this.userInfo)
    },
    userType () {
      return this.user?.type
    },
    userId () {
      return this.user?.userId
    },
    openAccount () {
      return this.user?.openAccount
    }
  },
  mounted () {
    this.getAdminUserInfo()
    this.getGeneralInfo()
    this.getAccount()
  },
  methods: {
    handleRefresh () {
      this.getAdminUserInfo()
    },
    async getAdminUserInfo () {
      try {
        const response = await account.getAdminUserInfo()
        // const { company, mobile, createAt, alias, code, name } = response.data
        this.adminValue = response.data
        this.$store.commit("tenant/TENANTINFO", response.data);
      } catch (error) {
        console.log("请求接口报错", error)
      }
    },
    async getAccount () {
      let { code, data } = await user.getUserInfo(this.userId);
      if (code === 0) {
        this.account = data
      }
    },
    async getGeneralInfo () {
      const response = await account.getBaseUserInfo()
      if (response?.code === 0) {
        this.general = response?.data
      }
    },
    handleUpdate () {
      this.getAccount()
    }
  }
};
</script>

<style scoped>
.box-card {
  height: calc(100vh - 100px);
}
</style>
